<template>
  <div class="h100">
    <v-tree @getCurData="getCurData" :params="params" :hiddenNum="true">
      <el-button
        type="default"
        icon="el-icon-refresh-right"
        class="ml10 pd10"
        slot="search"
        title="同步组织"
        @click="update(0)"
      ></el-button>
      <el-button
        type="default"
        icon="el-icon-coin"
        class="ml10 pd10"
        slot="search"
        title="同步配额"
        @click="update(1)"
      ></el-button>
      <div slot="content" slot-scope="dataR" class="right-contain">
        <template>
          <!-- 视图和表格 -->
          <div class="contain" v-if="!isTable">
            <div
              v-for="(el, inx) in dataR.data.children || [dataR.data]"
              :key="inx"
              class="contain-item cursor-pointer"
              @click="setBaseInfo(el)"
            >
              <div class="headers" @click="expand(inx)">
                {{ el.name }}
                <span
                  class="f14 font-org"
                >{{ el.aliyun_ecs_num_total ? `(${el.aliyun_ecs_num_total})` : '' }}</span>
              </div>
              <div
                :ref="'item' + inx"
                class="itemView"
                :class="itemExpandArr['item'+inx] ? '':'none'"
              >
                <div class="item-view">
                  <table class="table">
                    <colgroup>
                      <col width="100px" />
                      <col width="200px" />
                      <col width="900px" />
                      <col width="200px" />
                    </colgroup>
                    <thead>
                      <th>产品</th>
                      <th>产品组件</th>
                      <th>消耗情况</th>
                      <th>总容量</th>
                    </thead>
                    <tbody>
                      <!-- ECS开始 -->
                      <tr>
                        <td rowspan="4" class="hasRow">ECS</td>
                        <td>CPU</td>
                        <td>
                          <div class="f12 flex">
                            <span class="nowrap w140_m tl">
                              <span>已使用：</span>
                              <span class="font-org">{{el.aliyun_ecs_cpu_total}} 核</span>
                            </span>
                            <el-progress
                              v-if="el.id"
                              class="w100p"
                              color="#38a7368c"
                              :text-inside="true"
                              :stroke-width="18"
                              :percentage="parseInt(el.aliyun_ecs_cpu_total/el.aliyun_ecs_cpu_quota*100) || 0"
                            ></el-progress>
                          </div>
                        </td>
                        <td>{{ el.aliyun_ecs_cpu_quota }} 核</td>
                      </tr>
                      <tr>
                        <td>内存</td>
                        <td>
                          <div class="flex f12">
                            <span class="nowrap w140_m tl">
                              <span>已使用：</span>
                              <span class="font-org">{{el.aliyun_ecs_memory_total}} G</span>
                            </span>
                            <el-progress
                              v-if="el.id"
                              class="w100p"
                              color="#38a7368c"
                              :text-inside="true"
                              :stroke-width="18"
                              :percentage="parseInt(el.aliyun_ecs_memory_total/el.aliyun_ecs_memory_quota*100) || 0"
                            ></el-progress>
                          </div>
                        </td>
                        <td>{{ el.aliyun_ecs_memory_quota }} G</td>
                      </tr>
                      <tr>
                        <td>SSD盘</td>
                        <td>
                          <div class="flex f12">
                            <span class="nowrap w140_m tl">
                              <span>已使用：</span>
                              <span class="font-org">{{el.aliyun_ecs_disk_size_cloud_ssd_total}} G</span>
                            </span>
                            <el-progress
                              v-if="el.id"
                              class="w100p"
                              color="#38a7368c"
                              :text-inside="true"
                              :stroke-width="18"
                              :percentage="parseInt(el.aliyun_ecs_disk_size_cloud_ssd_total/el.aliyun_ecs_disk_size_cloud_ssd_quota*100) || 0"
                            ></el-progress>
                          </div>
                        </td>
                        <td>{{ el.aliyun_ecs_disk_size_cloud_ssd_quota }} G</td>
                      </tr>
                      <tr>
                        <td>高效云盘</td>
                        <td>
                          <div class="flex f12">
                            <span class="nowrap w140_m tl">
                              <span>已使用：</span>
                              <span
                                class="font-org"
                              >{{el.aliyun_ecs_disk_size_cloud_efficiency_total}} G</span>
                            </span>
                            <el-progress
                              v-if="el.id"
                              class="w100p"
                              color="#38a7368c"
                              :text-inside="true"
                              :stroke-width="18"
                              :percentage="parseInt(el.aliyun_ecs_disk_size_cloud_efficiency_total/el.aliyun_ecs_disk_size_cloud_efficiency_quota*100) || 0"
                            ></el-progress>
                          </div>
                        </td>
                        <td>{{ el.aliyun_ecs_disk_size_cloud_efficiency_quota }} G</td>
                      </tr>
                      <!-- ECS结束 -->
                      <!-- RDS开始 -->
                      <tr>
                        <td rowspan="3" class="hasRow">RDS</td>
                        <td>CPU</td>
                        <td>
                          <div class="flex f12">
                            <span class="nowrap w140_m tl">
                              <span>已使用：</span>
                              <span class="font-org">{{el.aliyun_rds_cpu_total}} 核</span>
                            </span>
                            <el-progress
                              v-if="el.id"
                              class="w100p"
                              color="#38a7368c"
                              :text-inside="true"
                              :stroke-width="18"
                              :percentage="parseInt(el.aliyun_rds_cpu_total/el.aliyun_rds_cpu_quota*100) || 0"
                            ></el-progress>
                          </div>
                        </td>
                        <td>{{ el.aliyun_rds_cpu_quota }} 核</td>
                      </tr>
                      <tr>
                        <td>内存</td>
                        <td>
                          <div class="flex f12">
                            <span class="nowrap w140_m tl">
                              <span>已使用：</span>
                              <span class="font-org">{{el.aliyun_rds_memory_total}} G</span>
                            </span>
                            <el-progress
                              v-if="el.id"
                              class="w100p"
                              color="#38a7368c"
                              :text-inside="true"
                              :stroke-width="18"
                              :percentage="parseInt(el.aliyun_rds_memory_total/el.aliyun_rds_memory_quota*100) || 0"
                            ></el-progress>
                          </div>
                        </td>
                        <td>{{ el.aliyun_rds_memory_quota }} G</td>
                      </tr>
                      <tr>
                        <td>磁盘</td>
                        <td>
                          <div class="flex f12">
                            <span class="nowrap w140_m tl">
                              <span>已使用：</span>
                              <span class="font-org">{{el.aliyun_rds_storage_total}} G</span>
                            </span>
                            <el-progress
                              v-if="el.id"
                              class="w100p"
                              color="#38a7368c"
                              :text-inside="true"
                              :stroke-width="18"
                              :percentage="parseInt(el.aliyun_rds_storage_total/el.aliyun_rds_storage_quota*100) || 0"
                            ></el-progress>
                          </div>
                        </td>
                        <td>{{ el.aliyun_rds_storage_quota }} G</td>
                      </tr>
                      <!-- RDS结束 -->
                      <!-- OSS开始 -->
                      <tr>
                        <td class="hasRow">OSS</td>
                        <td>存储容量</td>
                        <td>
                          <div class="flex f12">
                            <span class="nowrap w140_m tl">
                              <span>已使用：</span>
                              <span class="font-org">{{el.aliyun_oss_storage_total}} G</span>
                            </span>
                            <el-progress
                              v-if="el.id"
                              class="w100p"
                              color="#38a7368c"
                              :text-inside="true"
                              :stroke-width="18"
                              :percentage="parseInt(el.aliyun_oss_storage_total/el.aliyun_oss_storage_quota*100) || 0"
                            ></el-progress>
                          </div>
                        </td>
                        <td>{{ el.aliyun_oss_storage_quota }} G</td>
                      </tr>
                      <!-- OSS结束 -->
                      <!-- SLB开始 -->
                      <tr>
                        <td rowspan="2" class="hasRow">SLB</td>
                        <td>IP数量配额</td>
                        <td>
                          <div class="flex f12">
                            <span class="nowrap w140_m tl">
                              <span>已使用：</span>
                              <span class="font-org">{{el.aliyun_slb_ip_num_total}} 个</span>
                            </span>
                            <el-progress
                              v-if="el.id"
                              class="w100p"
                              color="#38a7368c"
                              :text-inside="true"
                              :stroke-width="18"
                              :percentage="parseInt(el.aliyun_slb_ip_num_total/el.aliyun_slb_ip_num_quota*100) || 0"
                            ></el-progress>
                          </div>
                        </td>
                        <td>{{ el.aliyun_slb_ip_num_quota }} 个</td>
                      </tr>
                      <tr>
                        <td>公网IP数量配额</td>
                        <td>
                          <div class="flex f12">
                            <span class="nowrap w140_m tl">
                              <span>已使用：</span>
                              <span class="font-org">{{el.aliyun_slb_public_ip_num_total}} 个</span>
                            </span>
                            <el-progress
                              v-if="el.id"
                              class="w100p"
                              color="#38a7368c"
                              :text-inside="true"
                              :stroke-width="18"
                              :percentage="parseInt(el.aliyun_slb_public_ip_num_total/el.aliyun_slb_public_ip_num_quota*100) || 0"
                            ></el-progress>
                          </div>
                        </td>
                        <td>{{ el.aliyun_slb_public_ip_num_quota }} 个</td>
                      </tr>
                      <!-- SLB结束 -->
                      <!-- REDIS开始 -->
                      <tr>
                        <td rowspan="2" class="hasRow">REDIS</td>
                        <td>存储容量</td>
                        <td>
                          <div class="flex f12">
                            <span class="nowrap w140_m tl">
                              <span>已使用：</span>
                              <span class="font-org">{{el.aliyun_redis_capacity_total}} G</span>
                            </span>
                            <el-progress
                              v-if="el.id"
                              class="w100p"
                              color="#38a7368c"
                              :text-inside="true"
                              :stroke-width="18"
                              :percentage="parseInt(el.aliyun_redis_capacity_total/el.aliyun_redis_capacity_quota*100) || 0"
                            ></el-progress>
                          </div>
                        </td>
                        <td>{{ el.aliyun_redis_capacity_quota }} G</td>
                      </tr>
                      <!-- REDIS结束 -->
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
          </div>
          <div class="contain" v-else>
            <div class="listbox aps9">
              <div class="tab-title">{{ dataR.data.name }}</div>
              <v-list ref="list" cards="1" :dataR="dataR" :hideTool="true">
                <template slot="search"></template>
                <template slot="head">
                  <thead>
                    <tr class="tr">
                      <th class="c1">组织名称(ID)</th>
                      <th colspan="32">产品</th>
                    </tr>
                  </thead>
                </template>
                <template slot="item" slot-scope="props">
                  <!-- 表格第二行 -->
                  <template>
                    <tr>
                      <td rowspan="4" class="font-blue hasRow">
                        <a
                          href="javascript:void(0)"
                          class="font-blue f14"
                          @click.stop="setBaseInfo(props.item)"
                        >
                          <span class="font-blue f11">{{ props.item.name }}</span>
                          <span class="font-gray f11">({{ props.item.id }})</span>
                        </a>
                      </td>
                      <td colspan="10">ECS</td>
                      <td colspan="8">RDS</td>
                      <td colspan="4">OOS</td>
                      <td colspan="6">SLB</td>
                      <td colspan="4">REDIS</td>
                    </tr>
                  </template>
                  <!-- 表格第三行 -->
                  <template>
                    <tr>
                      <td rowspan="2">使用</td>
                      <td rowspan="2">总计</td>
                      <td colspan="2">CPU</td>
                      <td colspan="2">内存</td>
                      <td colspan="2">SSD盘</td>
                      <td colspan="2">高效云盘</td>

                      <td rowspan="2">使用</td>
                      <td rowspan="2">总计</td>
                      <td colspan="2">CPU</td>
                      <td colspan="2">内存</td>
                      <td colspan="2">磁盘</td>

                      <td rowspan="2">使用</td>
                      <td rowspan="2">总计</td>
                      <td colspan="2">存储容量</td>

                      <td rowspan="2">使用</td>
                      <td rowspan="2">总计</td>
                      <td colspan="2">IP</td>
                      <td colspan="2">公网IP</td>

                      <td rowspan="2">使用</td>
                      <td rowspan="2">总计</td>
                      <td colspan="2">存储容量</td>
                    </tr>
                  </template>
                  <!-- 表格第四行 -->
                  <template>
                    <tr>
                      <!-- ECS -->
                      <template>
                        <!-- CPU -->
                        <td>使用</td>
                        <td>总计</td>
                        <!-- 内存 -->
                        <td>使用</td>
                        <td>总计</td>
                        <!-- SSD盘 -->
                        <td>使用</td>
                        <td>总计</td>
                        <!-- 高效云盘 -->
                        <td>使用</td>
                        <td>总计</td>
                      </template>
                      <!-- RDS -->
                      <template>
                        <!-- CPU -->
                        <td>使用</td>
                        <td>总计</td>
                        <!-- 内存 -->
                        <td>使用</td>
                        <td>总计</td>
                        <!-- 磁盘 -->
                        <td>使用</td>
                        <td>总计</td>
                      </template>
                      <!-- OSS -->
                      <template>
                        <!-- 存储容量 -->
                        <td>使用</td>
                        <td>总计</td>
                      </template>
                      <!-- SLB -->
                      <template>
                        <!-- IP -->
                        <td>使用</td>
                        <td>总计</td>
                        <!-- 公网IP -->
                        <td>使用</td>
                        <td>总计</td>
                      </template>
                      <!-- REDIS -->
                      <template>
                        <!-- 存储容量 -->
                        <td>使用</td>
                        <td>总计</td>
                      </template>
                    </tr>
                  </template>
                  <!-- 表格第五行 -->
                  <template>
                    <tr>
                      <!-- ECS内容 -->
                      <template>
                        <td class="font-org">
                          <span v-if="props.item.aliyun_ecs_num">{{ props.item.aliyun_ecs_num }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                        <td class="font-org">
                          <span
                            v-if="props.item.aliyun_ecs_num_total"
                          >{{ props.item.aliyun_ecs_num_total }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                        <td class="font-org">
                          <span
                            v-if="props.item.aliyun_ecs_cpu_total"
                          >{{ props.item.aliyun_ecs_cpu_total }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                        <td class="font-org">
                          <span
                            v-if="props.item.aliyun_ecs_cpu_quota"
                          >{{ props.item.aliyun_ecs_cpu_quota }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                        <td class="font-org">
                          <span
                            v-if="props.item.aliyun_ecs_memory_total"
                          >{{ props.item.aliyun_ecs_memory_total }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                        <td class="font-org">
                          <span
                            v-if="props.item.aliyun_ecs_memory_quota"
                          >{{ props.item.aliyun_ecs_memory_quota }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                        <td class="font-org">
                          <span
                            v-if="props.item.aliyun_ecs_disk_size_cloud_ssd_total"
                          >{{ props.item.aliyun_ecs_disk_size_cloud_ssd_total }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                        <td class="font-org">
                          <span
                            v-if="props.item.aliyun_ecs_disk_size_cloud_ssd_quota"
                          >{{ props.item.aliyun_ecs_disk_size_cloud_ssd_quota }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                        <td class="font-org">
                          <span
                            v-if="props.item.aliyun_ecs_disk_size_cloud_efficiency_total"
                          >{{ props.item.aliyun_ecs_disk_size_cloud_efficiency_total }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                        <td class="font-org">
                          <span
                            v-if="props.item.aliyun_ecs_disk_size_cloud_efficiency_quota"
                          >{{ props.item.aliyun_ecs_disk_size_cloud_efficiency_quota }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                      </template>
                      <!-- RDS内容 -->
                      <template>
                        <td class="font-org">
                          <span v-if="props.item.aliyun_rds_num">{{ props.item.aliyun_rds_num }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                        <td class="font-org">
                          <span
                            v-if="props.item.aliyun_rds_num_total"
                          >{{ props.item.aliyun_rds_num_total }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                        <td class="font-org">
                          <span
                            v-if="props.item.aliyun_rds_cpu_total"
                          >{{ props.item.aliyun_rds_cpu_total }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                        <td class="font-org">
                          <span
                            v-if="props.item.aliyun_rds_cpu_quota"
                          >{{ props.item.aliyun_rds_cpu_quota }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                        <td class="font-org">
                          <span
                            v-if="props.item.aliyun_rds_memory_total"
                          >{{ props.item.aliyun_rds_memory_total }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                        <td class="font-org">
                          <span
                            v-if="props.item.aliyun_rds_memory_quota"
                          >{{ props.item.aliyun_rds_memory_quota }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                        <td class="font-org">
                          <span
                            v-if="props.item.aliyun_rds_storage_total"
                          >{{ props.item.aliyun_rds_storage_total }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                        <td class="font-org">
                          <span
                            v-if="props.item.aliyun_rds_storage_quota"
                          >{{ props.item.aliyun_rds_storage_quota }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                      </template>
                      <!-- OSS内容 -->
                      <template>
                        <td class="font-org">
                          <span v-if="props.item.aliyun_oss_num">{{ props.item.aliyun_oss_num }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                        <td class="font-org">
                          <span
                            v-if="props.item.aliyun_oss_num_total"
                          >{{ props.item.aliyun_oss_num_total}}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                        <td class="font-org">
                          <span
                            v-if="props.item.aliyun_oss_storage_total"
                          >{{ props.item.aliyun_oss_storage_total }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                        <td class="font-org">
                          <span
                            v-if="props.item.aliyun_oss_storage_quota"
                          >{{ props.item.aliyun_oss_storage_quota }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                      </template>
                      <!-- SLB内容 -->
                      <template>
                        <td class="font-org">
                          <span v-if="props.item.aliyun_slb_num">{{ props.item.aliyun_slb_num }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                        <td class="font-org">
                          <span
                            v-if="props.item.aliyun_slb_num_total"
                          >{{ props.item.aliyun_slb_num_total }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                        <td class="font-org">
                          <span
                            v-if="props.item.aliyun_slb_ip_num_total"
                          >{{ props.item.aliyun_slb_ip_num_total }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                        <td class="font-org">
                          <span
                            v-if="props.item.aliyun_redis_capacity_quota"
                          >{{ props.item.aliyun_slb_ip_num_quota }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                        <td class="font-org">
                          <span
                            v-if="props.item.aliyun_slb_public_ip_num_total"
                          >{{ props.item.aliyun_slb_public_ip_num_total }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                        <td class="font-org">
                          <span
                            v-if="props.item.aliyun_slb_public_ip_num_quota"
                          >{{ props.item.aliyun_slb_public_ip_num_quota }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                      </template>
                      <!-- REDIS内容 -->
                      <template>
                        <td class="font-org">
                          <span v-if="props.item.aliyun_redis_num">{{ props.item.aliyun_redis_num }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                        <td class="font-org">
                          <span
                            v-if="props.item.aliyun_redis_num_total"
                          >{{ props.item.aliyun_redis_num_total}}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                        <td class="font-org">
                          <span
                            v-if="props.item.aliyun_redis_capacity_total"
                          >{{ props.item.aliyun_redis_capacity_total }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                        <td class="font-org">
                          <span
                            v-if="props.item.aliyun_redis_capacity_quota"
                          >{{ props.item.aliyun_redis_capacity_quota }}</span>
                          <span class="font-gray2" v-else>-</span>
                        </td>
                      </template>
                    </tr>
                  </template>
                </template>
              </v-list>
            </div>
          </div>
          <!-- 视图和表格结束 -->
          <!-- 切换操作 -->
          <div slot="operate" class="operate">
            <el-button
              v-if="isTable"
              type="default"
              icon="el-icon-s-data"
              class="pd10"
              :class="isTable ? '':'active'"
              slot="search"
              title="切换视图"
              @click="change(false)"
            ></el-button>
            <el-button
              v-else
              type="default"
              icon="el-icon-s-data"
              class="pd10"
              :class="isTable ? '':'active'"
              slot="search"
              :title="!isExpand ? '展开全部图表':'关闭全部图表'"
              @click="change(false, 1)"
            ></el-button>
            <el-button
              type="default"
              icon="el-icon-s-grid"
              class="pd10"
              :class="!isTable ? '':'active'"
              slot="search"
              title="切换表格"
              @click="change(true)"
            ></el-button>
          </div>
          <!-- 切换操作结束 -->
        </template>
      </div>
    </v-tree>
    <!-- 详情开始 -->
    <!-- <v-baseinfo v-model="drawer.show" :name="drawer.name">
      <div class="wrapper-content" v-if="drawer.data" slot="org/home">
        <div class="content-item">
          <span class="label w120">组织/项目名称：</span>
          <span class="value">{{drawer.data.name || '-'}}</span>
        </div>
        <div class="content-item">
          <span class="label w120">ECS使用数量：</span>
          <span class="value">{{drawer.data.aliyun_ecs_num || '-'}}</span>
        </div>
        <div class="content-item">
          <span class="label w120">ECS CPU使用总数：</span>
          <span class="value">{{drawer.data.aliyun_ecs_cpu_total || '-'}}</span>
        </div>
        <div class="content-item">
          <span class="label w120">ECS 内存使用总数：</span>
          <span class="value">{{drawer.data.aliyun_ecs_memory_total || '-'}}</span>
        </div>
        <div class="content-item">
          <span class="label w120">RDS使用数量：</span>
          <span class="value">{{drawer.data.aliyun_rds_num || '-'}}</span>
        </div>
        <div class="content-item">
          <span class="label w120">RDS CPU使用总数：</span>
          <span class="value">{{drawer.data.aliyun_rds_cpu || '-'}}</span>
        </div>
        <div class="content-item">
          <span class="label w120">RDS 内存使用总数：</span>
          <span class="value">{{drawer.data.aliyun_rds_memory || '-'}}</span>
        </div>
        <div class="content-item">
          <span class="label w120">OOS使用数量：</span>
          <span class="value">{{drawer.data.aliyun_oss_num || '-'}}</span>
        </div>
        <div class="content-item">
          <span class="label w120">OOS 存储使用总数：</span>
          <span class="value">{{drawer.data.aliyun_oss_storage || '-'}}</span>
        </div>
        <div class="content-item">
          <span class="label w120">SLB使用数量：</span>
          <span class="value">{{drawer.data.aliyun_slb_num || '-'}}</span>
        </div>
      </div>
    </v-baseinfo>-->
    <!-- 详情结束 -->
  </div>
</template>

<script>
export default {
  "drawer.show": {
    handler(newV) {
      if (!newV) {
        this.drawer.data = null;
      }
    }
  },
  data() {
    return {
      isTable: false,
      drawer: {
        show: false,
        data: null,
        name: "组织/详情"
      },
      isExpand: true,
      itemExpandArr: {},
      params: {
        order_by: ""
      }
    };
  },
  methods: {
    update(val) {
      let url;
      if (val) {
        url = "depart.sync_quota";
      } else {
        url = "depart.sync_depart";
      }
      this.$api.jget(url).then(res => {
        if (res.status === 1) {
          this.$success(res.msg);
        } else {
          this.$error(res.msg);
        }
      });
    },
    change(val, hasExpand) {
      if (hasExpand) {
        this.isExpand = !this.isExpand;
        for (const key in this.itemExpandArr) {
          this.itemExpandArr[key] = this.isExpand;
        }
      }
      this.isTable = val;
      document.getElementsByClassName("right")[0].scrollTop = 0;
    },
    setBaseInfo(item) {
      this.drawer.show = true;
      this.drawer.data = item;
    },
    getCurData(dat) {
      dat.forEach((el, inx) => {
        this.itemExpandArr["item" + inx] = true;
      });
      this.isExpand = true;
    },
    expand(inx) {
      this.itemExpandArr["item" + inx] = !this.itemExpandArr["item" + inx];
      for (const key in this.itemExpandArr) {
        if (this.itemExpandArr[key]) {
          this.isExpand = true;
        }
      }
      this.isExpand = !this.isExpand;
      this.isExpand = !this.isExpand;
    }
  },
  mounted() {
    this.params.order_by = "aliyun_ecs";
  }
};
</script>

<style lang="scss" scoped>
@media screen and (max-width: 1960px) {
  /deep/.contain {
    justify-content: center !important;
    &-item {
      width: calc(100% - 20px) !important;
      margin-right: 0 !important;
      .content {
        width: 40%;
      }
    }
  }
}
@media screen and (min-width: 1961px) and (max-width: 2560px) {
  /deep/.contain {
    &-item {
      width: calc(50% - 20px) !important;
    }
  }
}
@media screen and (min-width: 2561px) {
  /deep/.contain {
    &-item {
      width: calc(33.33% - 20px) !important;
    }
  }
}
table.table {
  td,
  th {
    text-align: center;
  }
  th {
    background-color: #ebeef5;
    border-right: 1px solid #fff;
    border-left: 1px solid #efefef;
    &:nth-last-child(1) {
      border-right: 0;
    }
  }
  td {
    padding: 13px;
  }
  tr {
    background-color: #fff !important;
  }
}
table.table tr > td {
  border-right: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
  &:nth-last-child(1) {
    border: 0;
    border-bottom: 1px solid #efefef;
  }
  &:nth-last-child(2) {
    padding-right: 20px;
    padding-left: 20px;
  }
}
table.table tr > td.hasRow {
  border-left: 1px solid #efefef;
  border-bottom: 1px solid #efefef;
}
table.table-list {
  tr {
    border-right: 1px solid #efefef;
    &:nth-child(8n-3),
    &:nth-child(8n-2),
    &:nth-child(8n-1),
    &:nth-child(8n) {
      background-color: #fafafa !important;
    }
  }
  td {
    padding: 6px;
  }
}
/deep/.contain {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: calc(100% - 30px);
  &-item {
    width: calc(25% - 20px);
    margin: 0 20px 20px 0;
    box-shadow: 1px 1px 3px rgba(170, 170, 170, 0.2);
    .headers {
      padding: 10px 10px;
      background-color: #7eb9f754;
    }
    .item-view {
      border-right: 1px solid #eaeaea;
      width: 100%;
      .view {
        display: flex;
        justify-content: space-evenly;
      }
    }
    .content {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 45%;
      &-left {
        width: 18%;
        min-width: 60px;
        & > div:nth-child(2) {
          padding: 6px 0;
          color: #333;
        }
        & > div:nth-child(1) {
          color: #606266;
        }
      }
      &-right {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .tc {
          margin: 4px 0;
          display: inline-block;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;

          span {
            display: inline;
          }
        }
        .btmInfo {
          text-align: right;
          color: #606266;
          padding-right: 10px;
        }
        .base {
          font-size: 12px;
          color: #fff;
          line-height: 16px;
          height: 16px;
          background-color: #efeff7;
          position: relative;
          .bar {
            background-color: #0071ce;
            height: 16px;
          }
          .bar1 {
            background-color: #8ccbff;
            position: absolute;
            top: 0px;
            height: 16px;
          }
        }
        .el-progress__text {
          color: #3860f4;
        }
        .el-progress {
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
  .listbox {
    position: relative;
    padding-top: 40px;
    .tab-title {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      height: 40px;
      line-height: 40px;
    }
  }
  div.cards {
    padding-bottom: 10px;
  }
  .itemView {
    display: flex;
    justify-content: space-between;
  }
}
.operate {
  display: inline-flex;
  flex-direction: column;
  position: fixed;
  top: 80px;
  right: 20px;
  button {
    margin: 0;
    margin-bottom: 10px;
    &:hover {
      color: #3860f4;
    }
  }
  .active {
    color: #3860f4;
    border-color: #c6e2ff;
    background-color: #ecf5ff;
  }
}
.pd-l-r10 {
  padding: 0 10px 0 10px;
}
.right-contain {
  min-width: 800px;
  display: flex;
}
.w140_m {
  min-width: 140px;
}
</style>